extends layout
block content
    // 组件可以扩展 HTML 元素, 封装可重用的代码, 让我们可以用独立可复用的小组件来构建大型应用, 几乎任意类型的应用的界面都可以抽象为一个组件树
    #app
        //- 分别调用 全局组件 局部组件 静态自定义属性 动态自定义属性 四种情况
        runoob
        runoob_1
        child(message="hello!")
        ol #[todo-item(v-for="item in sites" v-bind:todo="item")]
append scripts
    script.
        //- ================================================================
        //- 全局组件
        Vue.component('runoob', {template: '<h1>全局自定义组件!</h1>'})  // 注册
        //- ================================================================
        //- 局部组件, 需要在 new Vue() 中进行注册
        var Child = {template: '<h1>局部自定义组件!</h1>'}
        //- ================================================================
        //- 静态自定义属性
        Vue.component('child', {
            props: ['message'],  // 声明 props, 可以在 child(message="") 这里调用属性, 这样就会对下面的 template 进行修改
            template: '<span>{{ message }}</span>'  // 同样也可以在 vm 实例中像 "this.message" 这样使用
        })  // 这里的 message 已经在上面的标签中赋值了
        //- ================================================================
        //- 动态自定义属性, 要用到 v-bind: 单向动态更新 HTML
        Vue.component('todo-item', {  // 只要下面的 sites 变化, 上面的也会变;
            props: ['todo'],
            template: '<li>{{ todo.text }}</li>'
        })
        new Vue({
            el: '#app',
            data: {
                sites: [
                    { text: 'Runoob' },
                    { text: 'Google' },
                    { text: 'Taobao' }
                ]
            },
            components: {
                'runoob_1': Child  // <runoob_1> 将只在父模板可用
            }
        })  // 创建根实例, new Vue() 这个只要是在 Vue 中必须写
